<template>
  <FrontSideTreeTable
    treeDataUrl="/rel/diseaseTreatment/getPartsDiseaseTree"
    tableDataUrl="/rel/diseaseTreatment/getList"
    addUrl="/rel/diseaseTreatment/add"
    editUrl="/rel/diseaseTreatment/edit"
    deleteUrl="/rel/diseaseTreatment/delete"
    treeTitle="部件病害类型"
    :tableTitle="selectedNode.name+'处治措施列表'"
    :tableProps="{parentId:'diseaseTypeId'}"
    :columns="columns"
    searchHint="输入关键字进行搜索，多个关键字用空格隔开"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    :loadingForm="loadingForm"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onUpdate="handleUpdate"
    @onNodeClick="handleNodeClick"
    @onTableCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated">

    <template slot="form">
      <el-form-item label="病害类型" prop="diseaseTypeIds">
        <el-cascader v-model="form.diseaseTypeIds" :props="cascadeProps" :options="partsDisease" style="width: 100%;" placeholder="请选择部件，输入文字可搜索" filterable></el-cascader>
      </el-form-item>
      <el-form-item label="处治类型" prop="treatmentId">
        <el-select v-model="form.treatmentId" style="width: 100%;" placeholder="请选择处治措施，输入文字进行搜索" filterable>
          <el-option v-for="item of treatmentList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="尺寸类型" prop="field">
        <el-select v-model="form.field" style="width: 100%;" placeholder="请选择需要限定临界值的尺寸类型" clearable>
          <el-option v-for="item of dimensionFieldList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="最小临界值">
        <el-input type="number" v-model.number="form.minValue" placeholder="请输入最小临界值"></el-input>
      </el-form-item>
      <el-form-item label="最大临界值">
        <el-input type="number" v-model.number="form.maxValue" placeholder="请输入最大临界值"></el-input>
      </el-form-item>
      <el-form-item label="临界值范围" prop="scope">
        <el-select v-model="form.scope" style="width: 100%;" placeholder="请选择临界范围" clearable>
          <el-option label="X ＜ 最小临界值  " value="-1"></el-option>
          <el-option label="最小临界值 ≤ X ＜最大临界值)" value="0"></el-option>
          <el-option label="X ≥ 最大临界值" value="1"></el-option>
        </el-select>
      </el-form-item>
    </template>

  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {doGet} from "../../../assets/js/utils/RequestUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {childrenArrayOf, parentArrayOf} from "../../../assets/js/utils/TreeUtils"

  const TREATMENT_URL = "/rel/diseaseTreatment/getTreatmentList";

  export default {
    name:"DiseaseTreatment",
    data() {
      //判断尺寸是否输入
      let dimensionValidator = (rule, value, callback)=>{
        if(!!this.form.minValue || !!this.form.maxValue) {
          if(!!value) callback();
          else callback(new Error("临界值不为空，请选择临界值范围"));
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        treeData:[],
        treatmentList:[],
        dimensionFieldList:[
          {id:"LENGTH", name:"长度"},
          {id:"WIDTH", name:"宽度"},
          {id:"DEPTH", name:"深度"}
        ],
        columns:[
          {prop:"partsTypeName", label:"部件"},
          {prop:"diseaseTypeName", label:"病害类型"},
          {prop:"treatmentName", label:"处治方法"},
          {prop:"scopeName", label:"处治范围"}
        ],
        searchProps:["diseaseTypeName", "treatmentName", "scopeName"],
        form:{},
        rules:{
          diseaseTypeIds:[{required:true, type:"array", message:"请选择病害类型", trigger:"blur"}],
          treatmentId:[{required:true, message:"请选择处治类型", trigger:"blur"}],
          scope:[{validator:dimensionValidator, trigger:"blur"}]
        },
        cascadeProps:{
          label:"name",
          value:"id"
        },
        loadingForm:false,
        selectedNode:{name:"", id:""}
      }
    },
    computed:{
      partsDisease() {
        let result = [];
        let pNodes = this.treeData.filter(item=>!item.parentId);
        let cNodes = this.treeData.filter(item=>!!item.parentId);
        pNodes.forEach(pNode=>result.push({children:childrenArrayOf(pNode, cNodes), ...pNode}));
        return result;
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
        this.form.diseaseTypeIds = parentArrayOf(data, this.treeData, true).map(item=>item.id);
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleTableCreated(data) {
        this.datalist = data;
      },
      handleAdd() {
        this.form = {
          diseaseTypeIds:parentArrayOf(this.selectedNode, this.treeData, true).map(item=>item.id),
          treatmentId:"",
          field:"",
          minValue:"",
          maxValue:"",
          scope:""
        }
      },
      handleEdit(data) {
        this.form = {...data};
        this.form.diseaseTypeIds = parentArrayOf({id:this.form.diseaseTypeId}, this.treeData, true).map(item=>item.id);
      },
      handleUpdate() {
        if(Array.isArray(this.form.diseaseTypeIds) && this.form.diseaseTypeIds.length > 0) {
          this.form.diseaseTypeId = this.form.diseaseTypeIds[this.form.diseaseTypeIds.length - 1];
        }
      },
      fetchData() {
        doGet(TREATMENT_URL, {component:this}).then(response=>this.treatmentList = response);
      }
    },
    activated() {
      this.fetchData();
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// DiseaseTreatment.vue?693fa870